前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
• 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
• 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15
• 【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16
• 【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17
• 【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18
• 【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19
• 【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20

Components Basics

Dynamic Components

有時候我們會需要動態的切換元件，像是以下範例的 tab 頁籤，我們希望透過點擊不同的 tab (button) 來切換不同的元件。

<div id="dynamic-component-demo" class="demo">
  <button
    class="dynamic-component-demo-tab-button dynamic-component-demo-tab-button-active"
  >
    Home</button
  ><button class="dynamic-component-demo-tab-button">Posts</button
  ><button class="dynamic-component-demo-tab-button">Archive</button>
  <div class="dynamic-component-demo-tab">Home component</div>
</div>

像是這樣的 use case，我們可以透過 v-bind:is 來切換元件，如以下範例中，我們可以透過 currentTabComponent 來切換不同的元件。

<component v-bind:is="currentTabComponent"></component>

這個 currentTabComponent 可以是以下兩種：

1. 一個元件的名稱
2. 一個元件的 options object

一個元件的名稱

如以下範例中 currentTabComponent 代表的就是元件的名稱，像是 tab-home、tab-posts、tab-archive。
當使用者點擊不同的 tab (button) 時，執行的流程如下，

1. 將物件的名稱傳給 currentTab 這個變數
2. 在 root component 中，當 currentTab 變數改變時，computed 屬性 currentTabComponent 也會跟著改變
3. 當 currentTabComponent 改變時，會重新 render 一次，並且將 currentTabComponent 的值傳給 v-bind:is，這時候就會切換不同的元件

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab"
    v-bind:class="['tab-button', { active: currentTab === tab }]"
    v-on:click="currentTab = tab"
  >
    {{ tab }}
  </button>

  <component v-bind:is="currentTabComponent" class="tab"></component>
</div>

Vue.component("tab-home", {
  template: "<div>Home component</div>"
});
Vue.component("tab-posts", {
  template: "<div>Posts component</div>"
});
Vue.component("tab-archive", {
  template: "<div>Archive component</div>"
});

new Vue({
  el: "#dynamic-component-demo",
  data: {
    currentTab: "Home",
    tabs: ["Home", "Posts", "Archive"]
  },
  computed: {
    currentTabComponent: function() {
      return "tab-" + this.currentTab.toLowerCase();
    }
  }
});

一個元件的 options object

如以下範例中 currentTab.component 代表的就是元件的 options object，會對應到 tabs 陣列中的某一個 object 的 component 屬性。
當使用者點擊不同的 tab (button) 時，執行的流程如下，

1. 將 tabs 陣列中對應的 object 傳給 currentTab 這個變數
2. 在 root component 中，當 currentTab 變數改變時，會重新 render 一次，並且將 currentTab.component 的值傳給 v-bind:is，這時候就會切換不同的元件

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab.name"
    v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"
    v-on:click="currentTab = tab"
  >
    {{ tab.name }}
  </button>

  <component v-bind:is="currentTab.component" class="tab"></component>
</div>

var tabs = [
  {
    name: "Home",
    component: {
      template: "<div>Home component</div>",
    },
  },
  {
    name: "Posts",
    component: {
      template: "<div>Posts component</div>",
    },
  },
  {
    name: "Archive",
    component: {
      template: "<div>Archive component</div>",
    },
  },
];

new Vue({
  el: "#dynamic-component-demo",
  data: {
    tabs: tabs,
    currentTab: tabs[0],
  },
});

Reference

• https://v2.vuejs.org/v2/guide/components.html